<template>
  <view class="wrap">
		<top-tab tabTitle="积分商城" @backClick="backClick"/>
    <view class="header-back">
			<image src="/static/my/store.jpeg" class="img"></image>
			<view class="btn-integral-box">
				<view class="integral">{{myScore}}</view>
				<view class="btn-list">
					<view class="integ-details" @click="intefDetail">积分明细</view>
					<view class="integ-convert" @click="interRecord">积分兑换记录</view>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="border-back">
				<view class="store-list">
					<view class="decorate-box">
						<view class="decorate"></view>
						<view class="decorate" style="margin: 8rpx 0;"></view>
						<view class="decorate"></view>
					</view>
					<view class="title">热换榜单</view>
					<view class="decorate-box">
						<view class="decorate"></view>
						<view class="decorate" style="margin: 8rpx 0;"></view>
						<view class="decorate"></view>
					</view>
				</view>
				<!-- 列表 -->
				<view class="heat-box">
					<view class="img-conversion-list" v-for="(item,index) in converList" :key="item.id">
						<image src="/static/my/the_gift.png" class="gigt-img"></image>
						<view class="item-text-btn">
							<view class="free-vip">{{item.title}}</view>
							<view class="consume">消耗{{item.pointPrice}}积分</view>
							<view class="btn" @click="addPay(item.id)">立即兑换</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 提示兑换弹窗 -->
		<uni-popup ref="popup" type="dialog">
		    <uni-popup-dialog mode="base" title="兑换积分" 
				:duration="2000" type="info"
				@confirm="confirm">
				<view>确认兑换积分吗？</view>
				</uni-popup-dialog>
		</uni-popup>
  </view>
</template>

<script>
	import topTab from '@/components/top-tabbar.vue'
	import { $POST, $GET } from '@/network/api.js'
  export default {
		components: { topTab },
    data() {
      return {
				inegExchange: { // 兑换积分参数
					account: '', // 登录人账号
					pointsGoodsId: '', // 积分商品id
					pointsGoodsStatus: 1, // 状态：上架=1，下架=0
				},
				integGoodsFrom: { // 积分商品参数
					goodsInfo: 1, // 商品状态：1=正常，0=禁用
					points: '', // 用户已有的积分值
					pointsGoodsStatus: 1 // 状态：上架=1，下架=0
				},
				myScore: '', // 积分
				userData: uni.getStorageSync('user_key'), // 获取个人信息
				converList: [],
				statuHeight: uni.getSystemInfoSync().statusBarHeight + 44, // 状态栏高度
			}
    },
	onLoad() {
		this.queryScore() // 查询积分
		this.integralGoods() // 积分商品
	},
  methods: {
		// 兑换积分
		async confirm() {
			const res = await $POST("/boke-item/user/pointExchange",this.inegExchange)
			if(res.code === "0000000") {
					uni.showToast({title: "兑换成功", icon:'none'})
			}
		},
		// 可兑换的积分商品
		async integralGoods() {
			const res = await $POST("/boke-item/user/converPointsGoodsList",this.integGoodsFrom)
			this.converList = res.data
		},
		// 可用积分
		queryScore() {
			$POST("/boke-item/user/selectIntegral",{ account: this.userData.account }).then(res => {
				this.myScore = res.data.integral // 可用积分赋值
				this.integGoodsFrom.points = res.data.integral // 可用积分赋值
			})
		},
		// 打开弹窗
		addPay(id) {
			this.inegExchange.account = this.userData.account // 账号赋值
			this.inegExchange.pointsGoodsId = id // 积分id赋值
			this.$refs.popup.open('')
		},
		// 返回上一页
		backClick() {
			uni.navigateTo({
				url: '/pages/my/sign/sign'
			})
		},
		// 积分记录
		interRecord() {
			uni.navigateTo({
				url: '/pages/my/sign/integ_record'
			})
		},
		// 积分明细
		intefDetail() {
			uni.navigateTo({
				url: '/pages/my/sign/inviteDetail'
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	.wrap{
		height: 100vh;
		background: #7F2EE1;
		/deep/ .top-tabbar-wrap{
			background: rgba(0,0,0,0.15);
		}
		.header-back{
			width: 100%;
			height: 414rpx;
			position: relative;
			.img{
				width: 100%;
				height: 100%;
			}
			.btn-integral-box{
				position: absolute;
				bottom: 8px;
				left: 0;
				right: 0;
				.integral{
					font-size: 50rpx;
					font-family: PingFang SC;
					font-weight: 600;
					color: #FFFFFF;
					text-align: center;
					margin-bottom: 40rpx;
				}
				.btn-list{
					display: flex;
					align-items: center;
					justify-content: center;
					.integ-details,.integ-convert{
						width: 180rpx;
						height: 60rpx;
						border: 2rpx solid #FFFFFF;
						border-radius: 27rpx;
						line-height: 60rpx;
						text-align: center;
						font-size: 28rpx;
						font-family: PingFang SC;
						color: #FFFFFF;
					}
					.integ-convert{
						font-size: 24rpx;
						margin-left: 22rpx;
					}
				}
			}
		}
	}

	.main{
		margin-top: 35rpx;
		padding: 0 30rpx 100rpx 30rpx;
		background: #7F2EE1;
		.border-back{
			position: relative;
			width: 100%;
			// height: 800rpx;
			box-sizing: border-box;
			box-shadow:0 0 9px 5px #BC3AEF inset;
			background: #3C1168;
			padding-bottom: 80rpx; 
			.store-list{
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 20rpx 0 50rpx 0;
				.decorate-box{
					.decorate{
						width: 167rpx;
						height: 4rpx;
						background: #9B2DC6;
					}
				}
				.title{
					font-size: 40rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					letter-spacing:2px;
				}
			}
			.heat-box{
				
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				.img-conversion-list{
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 35rpx;
					.gigt-img{
						display: block;
						width: 193rpx;
						height: 185rpx;
					}
					.item-text-btn{
						color: #FFFFFF;
						font-size: 24rpx;
						margin-left: 65rpx;
						.consume{
							margin: 20rpx 0;
							font-size: 26rpx;
						}
						.free-vip{
							font-size: 30rpx;
							font-family: Adobe Heiti Std;
							font-weight: 500;
						}
						.btn{
							width: 130rpx;
							height: 46rpx;
							background: #943BFF;
							border-radius: 5rpx;
							line-height: 46rpx;
							text-align: center;
						}
					}
				}
			}
		}
	}
</style>
